@charset "utf-8";




/* =全局CSS
------------------------------------------------------------ */





body{  font-family: "微软雅黑"; color:#606161; font-size: 14px;  background:#0c4b5d;}
html{overflow-x:hidden}
a { text-decoration:none; color:#fff;}
a:hover{ text-decoration:underline; }


.box{overflow:hidden;}

.main{ overflow:hidden; width:100%; height:100%; position:fixed;}

/*.user_time,.game_score{ position:absolute;  line-height:28px; text-align:center; color:#1970c0; border:1px solid #1970c0; border-radius:20px;  display:block; background:#fff; box-shadow:3px 3px 3px #242424; font-size:16px; padding:0 20px}
.user_time{ left:10px; top:10px;}
.game_score{ left:140px; top:10px;}*/

.user_time,.game_score{ overflow:hidden; position:fixed; top:10px;  border: 1px solid #1970c0; border-radius: 20px;background: #fff;box-shadow: 3px 3px 3px #242424; color: #1970c0; padding:0 12px; font-size:18px;}
.user_time{ left:10px;}
.game_score{ left:140px;}
.user_time .text,.game_score_curr{ color:#ff8105;}
.user_exit{ width:30px; height:30px; background:url(../images/close.png); background-size:contain; position:fixed; right:10px; top:6px;}


.loading{ width:150px; height:150px; background:url(../images/yyhl/loading.png) no-repeat; background-size:contain; position:absolute; left:50%; top:50%;
	  -webkit-animation: twinkling 1.2s infinite linear; }





@-webkit-keyframes twinkling{    /*透明度由0到1*/
    0%{
       opacity:0
     }
	 50%{
       opacity:0.6;
     }
    100%{
       opacity:1; 
    }
}


.yyhl_right{ width:100%; height:100%; overflow:hidden;position:relative;}

.yyhl_con{ overflow:hidden; background:#fff; width:320px; height:200px; position:absolute; top:120px; left:50%; margin-left:-162px;border:2px solid #2d5143; border-radius:20px; box-shadow:10px 10px 10px #2f2f2f;}







.formula{  }
.formula .number{ font-size:50px; color:#3b3d3c; text-align:center; margin-top:20px;}
.formula span{ padding:0 5px;}
.formula button{ padding:0 5px;}
.formula .btn{ margin-top:30px; text-align:center; cursor:pointer;}
.formula .btn button{ display:inline-block; width:95px; height:45px; margin:0 20px;font-size:22px; color:#fff;  background:#dadada; text-align:center;border-radius:20px; opacity:0.9; border: 0;}
.formula .btn button:hover{opacity:1}
.formula .btn .yes{ background:#157aff}
.formula .btn .no{ background:#f59c28}




.word{text-align:center; padding-top:35px;font-size:90px; color:#ff7600;  text-shadow: 2px 1px 0 #ff0000 , -2px -1px 0 #ff0000;}

.word_input{overflow:hidden; height: 200px;}
.word_input ul{ overflow:hidden; width:280px; margin:10px auto 0;}

.word_input li{ float:left; width:50px; height:40px; line-height:40px; border-radius:10px; background:#ccc; margin:10px; text-align:center; font-size:22px; color:#000;transition: all .3s ease-in-out; cursor:pointer;}

.word_input li:hover{  transform: translate(-1px, -1px); box-shadow:2px 2px 2px #303030;}

.word_input li.true{ color:yellow;font-weight:bold;}
.word_input li.false{ color:red; font-weight:bold;}






.flag_tf{ position:absolute;top:30px;left:50%; margin-left:-50px; display:block; width:100px; height:100px; }
.flag_tf.result_true{ background:url(../images/true.png) no-repeat; }
.flag_tf.result_false{background:url(../images/false.png) no-repeat;}






.game_alert{ width:280px; height:250px;margin-left:-140px; margin-top:-125px; border-radius:10px; border:1px solid #fff; position:absolute; z-index:9999; left:50%; top:50%;  display:none; overflow:hidden; background:#fff;}
.game_alert .title{ height:50px; line-height:50px; font-size:24px;  text-align:center;background: linear-gradient(to right, #2340fc , #117bff); color:#fff;display:block; }
.game_alert .content{ color:#404040; font-size:16px; line-height:30px; padding-top:50px; text-align:center;  position:relative;}
.game_alert .ok{ display:block; position:absolute; left:50%; bottom:10px; left:50%; margin-left:-100px; width:200px; height:40px;line-height:40px;cursor:pointer; background:#f59c28; border-radius:10px; color:#fff; text-align:center; font-size:18px;}
.game_alert .content span{ padding:10px 0; display:inline-block;}
.finish_prompt .content{padding-top:20px; }


.tips{   position:absolute; left:50%; bottom:60px; margin-left:-152px; overflow:hidden; width:300px;  font-size:16px; color:#fff; font-weight:bold; opacity:1; text-align:center; display: none; }



@media (min-width: 480px) {
	.user_exit{width:40px; height:40px;}
	.yyhl_con{ width:380px;margin-left:-192px; }
	
}

@media (min-width: 768px) {
	.user_exit{width:60px; height:60px;}
	
	.yyhl_con{ width:452px; height:200px; top:200px; left:50%; margin-left:-226px;}
	.word_input{ width:455px; }
	.formula .btn button{width:120px; height:52px;font-size:24px;}
	.tips{ width:400px; margin-left:-200px; font-size:22px;}
	.formula .number{ font-size:60px;}
	
	.user_time,.game_score{ font-size:18px;}
	.user_time{ left:10px; top:20px;}
	.game_score{ left:10px; top:60px;}
	.user_exit{ top:25px; right:30px; width:40px; height:40px;}
	
	
	
	

	
}

@media (min-width: 1200px) { 

	.user_time{ left:30px; top:20px;}
	.game_score{ left:30px; top:60px;}
	.user_exit{ top:25px; right:30px; width:40px; height:40px;}
}

@media (min-width: 1280px) { 

	.user_time,.game_score{height:30px; line-height:30px; padding:0 30px;}
	
}

@media (min-width: 1366px) { 
	.game_alert{width:330px; height:330px; margin-left:-175px;  margin-top:-175px;}
	.game_alert .title{ height:90px; line-height:90px; font-size:30px;  text-align:center;background: linear-gradient(to right, #2340fc , #117bff); color:#fff;display:block; }
	.game_alert .content{ font-size:20px; line-height:30px; padding-top:60px;}
	.game_alert .ok{ bottom:20px; height:50px;line-height:50px;font-size:20px;}	
	.finish_prompt .content{padding-top:40px; }
	
}

@media (min-width: 1440px) { 
	.user_time,.game_score{font-size:18px; left:100px; top:40px; height:40px; line-height:40px; padding:0 30px; font-size:26px;}
	.game_score{ top:110px;}	
	.user_exit{width:50px; height:50px; right:20px; top:50px;}
}










